<template>
  <div class="page-bg">
    <div v-if="menuCount<1" class="flex-row" style="width:100%">
      <blanck></blanck>
    </div>
    <div v-else>
      <div class="top page-color"><div class="label">共{{menuCount}}件宝贝</div></div>
      <div class="splite"></div>
      <div class="flex-row page-orders">
        <div class="flex-column flex-middle page-order" v-for="(order,index) in storeMenu" :key="index">
          <div style="margin-left:40rpx;">
            <!-- <o-select :selected="isSelectAll" @change="selectChange($event, index)"></o-select> -->
          </div>
          <image class="image" mode="aspectFill" :src="order.image"></image>
          <div class="flex-row order-center">
            <div class="order-title">{{order.name}}</div>
            <div v-if="order.discount" class="order-price" style="font-size:26rpx;">折扣 {{order.discount}}</div>
            <div class="order-price">￥{{order.price}}/斤</div>
          </div>
          <number-step
            @change="stepChange"
            :index="index"
            :number="order.num">
          </number-step>
        </div>
      </div>

      <div class="splite"></div>
      <div class="bottom flex-column flex-middle">
        <div class="left flex-item flex-column flex-middle">
          <!-- <o-select :selected="isSelectAll" @change="selectAllChange"></o-select><div class="all">全选</div> -->
        </div>
        <div class="right flex-column flex-middle">
          合计：<div class="money">￥{{sum}}</div>
          <div @click="navigateTo" class="btn page-color">结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import OSelect from '@/components/OSelect'
  import Blanck from '@/components/blanck'
  import NumberStep from '@/components/oui/NumberStep'

  export default {
    data() {
      return {
        isSelectAll: false,
        orders: [1,2,3,4],
        icons: ['/static/icon-jia.png', '/static/icon-jian.png'],
        storeMenu: null,
        menuCount: 0,
        // key: value
      }
    },
    components: {
      OSelect, Blanck, NumberStep
    },
    computed: {
      sum() {
        let sum = 0
        if (!this.storeMenu) return sum
        let menuCount = 0
        this.storeMenu && this.storeMenu.forEach(item=> {
          menuCount += parseInt(item.num)
          let price = isNaN(parseFloat(item.price))?100:(parseFloat(item.price)-parseFloat(item.discount))
          sum += Math.round(parseFloat(item.num) * price*100)/100
        })
        this.menuCount = menuCount
        return sum
      }
    },
    methods: {
      selectAllChange(selected) {
        this.isSelectAll = selected
      },
      selectChange(selected, index) {
        this.isSelectAll = selected
      },

      // 加减
      stepChange({index, isAdd}) {
        if (isAdd) {
          this.storeMenu[index].num += 1
          this.$store.commit('setMenu',this.storeMenu)
        } else {
          if (this.storeMenu[index].num<1) return this.$showToast('不能再减啦~')
          this.storeMenu[index].num -= 1
          if (this.storeMenu[index].num==0) {
            this.storeMenu.splice(index, 1)
          }
          this.$store.commit('setMenu',this.storeMenu)
        }
      },
      navigateTo() {
        wx.navigateTo({
          url: '../product/main'
        })
      }
    },
    onShow() {
      console.log('onShow');
      
      const storeMenu = JSON.parse(JSON.stringify(this.$store.state.menu))
      console.log(this.$store.state.menu, storeMenu);
      
      let menuCount = 0
      storeMenu.forEach(item=> {
        menuCount += parseInt(item.num)
      })
      console.log(menuCount);
      this.storeMenu = storeMenu
      this.menuCount = menuCount
    }
  }
</script>

<style lang="less" scoped>
.page-bg {
  padding-top: 0;
}
.top {
  // position: fixed;top: 0;
  width: 100%;
  height:100px;
  .label {
    padding: 12px 10px;
    font-size: 15px;color: #fff;
  }
}
// .splite {
//   width: 100vw;
//   height: 50px;
// }
.page-orders {
  margin-top: -60px;
  padding-bottom: 80px;
}
.page-order {
  margin: 10px auto;
  width:calc(100vw - 2*15px);
  height:108px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 5px 0px rgba(243,243,243,1);
  border-radius:15px;
  .image {
    width: 75px;height: 50px;
    margin: 0 17px 0 14px;
  }
  .order-title {
    color: #444444;
    font-size: 15px;margin-bottom: 10px;
  }
  .order-price {
    color: #FF8100;font-size: 15px;
    .large {font-size: 20px}
  }
  
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height:55px;
  background:rgba(255,255,255,1);
  box-shadow: #f1f1f1 0 0 20px;
  // border-top:1px solid #999;
  .left {
    margin-left: 24px;
    .all {
      color: #999999;font-size: 13px;margin-left: 10px;
    }
  }
  .right {
    font-size: 13px;
    color: #333333;
    .money {
      color: #FF5301;
    }
    .btn {
      margin:0 27px 0 13px;
      border-radius:15px;
      color: #fff;
      padding: 7px 18px;
    }
  }
}
</style>